
			
			//基于鼠标划入方向实现一个动态效果，上下左右四个方向均可以
			$.fn.extend({
				hoverdir : function(){
					$("#box").on("mouseenter mouseleave", function(e){
						var w = $(this).width();
						var h = $(this).height();
						var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1);
						var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1);
						var direction = Math.round(( Math.atan2(y, x) * (180 / Math.PI) / 90) + 5) % 4;
						var $cover = $(this).find(".hover");
						
						var list = {
							0 : function(){ //从上
								if(e.type=="mouseenter") {
									$cover.css({
										left: 0,
										top: "-100%"
									}).animate({top:0}, 500)
								} else {
									$cover.animate({ top: "-100%" }, 500);
								}
							}.bind(this),
							1 : function(){ //从右
								if(e.type == "mouseenter") {
									$cover.css({
										left: "100%",
										top: 0
									}).animate({left:0}, 500)
								} else {
									$cover.animate({ left: "100%" }, 500);
								}
							}.bind(this),
							2 : function(){ //从下
								if(e.type == "mouseenter") {
									$cover.css({
										left: 0,
										top: "100%"
									}).animate({top:0}, 500)
								} else {
									$cover.animate({ top : "100%" }, 500);
								}
							}.bind(this),
							3 : function(){ //从左
								if(e.type == "mouseenter") {
									$cover.css({
										left: "-100%",
										top: 0
									}).animate({left:0}, 500)
								}else {
									$cover.animate({ left: "-100%" }, 500);
								}
							}.bind(this)
						}
						list[direction]();
					})
				}
			})
			
			$("#box").hoverdir();
	
